<template>
	<view class="wrapper">
		<!-- 	<view class="title-padding"></view>-->
		<!-- 		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				商品分类
			</view>
		</view> -->
		<!-- 	<view class="search">
			<input v-model="searchValue" placeholder="输入商品分类" />
			<text @tap="searchGoodsType()">搜索</text>
		</view> -->
		<view class="clientSearchItem">
			<input class="search clientSearch" placeholder="请输入类型名称" v-model="searchValue" @input="filterGoodType"></input>
			<button class="button searchBt" @tap="searchGoodsType()">搜索</button>
		</view>
		<view class="goodTypeList">
			<view class="tabTitle">
				<text>序号</text>
				<text>商品分类</text>
				<text>操作</text>
			</view>
			<view class="goodTypeListContainer" :style="{height:bottomListHeight +'px'}">
				<view class="goodTypeItem" v-for="(item,index) in GoodsTempTypeList" :key="index">
					<text>{{index+1}}</text>
					<text>{{item.TypeName}}</text>
					<view><button @tap="openModel(1,item.GoodsTypeID)"></button><button @tap="openModel(2,item.GoodsTypeID)"></button></view>
				</view>
			</view>
		</view>
		<view class="flOptions">
			<button @tap="openModel(0)">新增</button>
		</view>
		<!--新增新增银行账号弹框-->
		<view class="Modal_Wrap" v-show="isShowDialog">
			<view class="Model">
				<view class="modelTitle">
					{{addOrChangeTitle}}
				</view>
				<!-- 	<view class="modelContains" v-if="addOrChangeType!=2">
					<text>商品分类</text><input placeholder="输入商品分类" v-model="goodType" />
				</view>
				<view class="modelContains" v-if="addOrChangeType==2">
					{{goodTypeName}}
				</view> -->
				<view class="cu-form-group" v-if="addOrChangeType!=2">
					<view class="title">类别名称：</view>
					<input class="inpt text-left" placeholder="输入商品类别" v-model="goodType"></input>
				</view>
				<view class="modalOptions">
					<view @tap="cancel(0)">取消</view>
					<view @tap="cancel(1,addOrChangeType)">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		data() {
			return {
				//输入框的值
				searchValue: "",
				//底部列表滚动的高度
				bottomListHeight: 0,
				//进行操作的标识
				addOrChangeType: 0,
				//进行操作的标题
				addOrChangeTitle: "新增类别",
				//商品类别
				goodType: "",
				//弹框的显隐
				isShowDialog: false,
				//输入框的值
				goodTypeVaule: "1111",
				//当前新增或者修改的商品的ID
				NowGoodID: "",
				//商品分类列表
				GoodsTypeList: [],
				//商品分类临时列表
				GoodsTempTypeList: [],
				//当前商品的名字
				goodTypeName: ""
			}
		},
		created() {
			//获取屏幕高度uni.getSystemInfoSync().statusBarHeight
			var $this = this;
			this.bottomListHeight = uni.getSystemInfoSync().windowHeight - 38 - 48 - 50;
			this.getAllGoodsList();
			uni.hideTabBar();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			filterGoodType(e) {
				let tempList = [];
				this.GoodsTypeList.forEach((item, index) => {
					if (item.TypeName.indexOf(e.detail.value) > -1) {
						tempList.push(item);
					}
				});
				if (tempList.length == 0) {
					Api.showTip("查无数据");
				}
				this.GoodsTempTypeList = tempList;
			},
			//关闭弹框
			cancel(state, type) {
				this.isShowDialog = false;
				if (state == 0) {
					this.goodType = "";
				}
				//删除操作
				if (type == 2 && state != 0) {
					this.deleteGoodsType();
				}
				//修改操作
				else if (type == 1 && state != 0) {
					this.changeGoodsType();
				}
				//新增操作
				else if (state != 0) {
					this.addGoodsTypeName();
				}
			},
			//开启弹框
			openModel(type, GoodsId) {
				this.isAdd = true;
				this.isShowDialog = true;
				this.addOrChangeType = type;
				if (type == 0) {
					this.addOrChangeTitle = "新增分类";
				} else if (type == 1) {
					this.addOrChangeTitle = "修改分类";
					this.NowGoodID = GoodsId;
					for (var item in this.GoodsTypeList) {
						if (this.GoodsTypeList[item].GoodsTypeID == GoodsId) {
							console.log(this.GoodsTypeList[item].GoodsTypeID, GoodsId);
							this.goodType = this.GoodsTypeList[item].TypeName;
						}
					}

				} else {
					this.addOrChangeTitle = "确认删除以下分类吗";
					for (var item in this.GoodsTypeList) {
						if (this.GoodsTypeList[item].GoodsTypeID == GoodsId) {
							console.log(this.GoodsTypeList[item].GoodsTypeID, GoodsId);
							this.goodTypeName = this.GoodsTypeList[item].TypeName;
						}
					}
					this.NowGoodID = GoodsId;
				}

			},
			//查询商品
			searchGoodsType() {
				// let filter = "TypeName like'%" + this.searchValue + "%'";
				let data = {
					detail:{
						value:this.searchValue
					}
				}
				this.filterGoodType(data);
			},
			//删除商品
			deleteGoodsType() {
				let data = {
					GoodsTypeID: this.NowGoodID
				}
				var _this = this;
				Api.DeleteGoodsType(data, function(res) {
					if (res.state) {
						if (res.data.TipsMsg == 'OK') {
							Api.showTip("删除成功");
							_this.getAllGoodsList();
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				});

			},
			//新增商品
			addGoodsTypeName() {
				let Save_M_Data_Json = {
					TypeName: this.goodType,
					CreateID: this.UserCode
				};
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var _this = this;
				Api.AddGoodsType(data, function(res) {
					if (res.state) {
						if (res.data.TipsMsg == 'OK') {
							Api.showTip("新增成功");
							_this.getAllGoodsList();
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							console.log(res);
						}
						_this.goodType = "";
					} else {
						Api.showTip("服务器开小差了");
					}
				});
			},
			//修改所选的商品的类型
			changeGoodsType() {
				let Save_M_Data_Json = {
					GoodsTypeID: this.NowGoodID,
					TypeName: this.goodType,
					ChangeID: this.UserCode
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var _this = this;
				Api.UpdateGoodsType(data, function(res) {
					if (res.state) {
						if (res.data.TipsMsg == "OK") {
							Api.showTip("修改成功");
							_this.getAllGoodsList();
						} else if (res.data.ErrorMsg != "") {
							showTip(res.data.ErrorMsg);
						}
						_this.goodType = "";
					} else {
						Api.showTip("服务器开小差了");
					}
				});
			},
			//获取全部分类的商品
			getAllGoodsList(filter) {
				if (filter === undefined) {
					filter = "";
				}
				let data = {
					Filter: filter
				}
				var _this = this;
				Api.GoodsTypeList(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("获取登录信息失败");
							return;
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
							return;
						} else {
							if(res.data.ResultMsg.length==0){
								Api.showTip("查无数据");
								
							}
							_this.GoodsTempTypeList = res.data.ResultMsg;
							_this.GoodsTypeList = res.data.ResultMsg;
							_this.searchValue = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*图标的大小*/
	$iconWidth:40upx;
	$iconHeight:40upx;
	$iconBackSize:40upx;

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	body {
		width: 100%;
		height: 100%;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.wrapper {
		width: 100%;
		height: 100%;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: $bb-bg-color;
		display: table;
		top: var(--status-bar-height);

		.header {
			position: relative;
			text-align: center;
			font-size: 32upx;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}

		}
	}

	.search {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: #FFFFFF;
		padding-top: 10upx;
		border: 1px solid #ccc;
		box-sizing: border-box;
		display: flex;
		padding-left: 15upx;
		padding-right: 15upx;

		input {
			flex: 1;
			height: 80upx;
			display: inline-block;
			border: 1px solid #FFF;
			color: #999;
			border-radius: 10upx;
			border-top-right-radius: 0upx;
			border-bottom-right-radius: 0upx;
			padding-left: 10upx;
			background: #FFF;

		}

		text {
			display: inline-block;
			width: 120upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			padding-top: -10upx;
			background: #FFF;
			border-top-left-radius: 0upx;
			border-bottom-left-radius: 0upx;
			border-left: 1upx solid #999;
		}
	}

	.goodTypeList {
		width: 100%;

		.tabTitle {
			width: 100%;
			display: flex;
			flex-direction: row;
			background: rgb(124, 170, 216);
			color: #FFFFFF;
			border-bottom: 1px solid #C0C0C0;

			text {
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-right: 1upx solid #FFF;

				&:nth-child(1) {
					width: 120upx;
					text-align: center;

				}

				&:last-child {
					width: 200upx;
					text-align: center;

					button {
						width: 80upx;
						height: 80upx;
						background: url(../../static/delete.png) no-repeat;
						background-size: 80upx;
					}
				}

				&:nth-child(2) {
					flex: 1;
				}
			}
		}

		.goodTypeListContainer {
			background: #FFF;
			overflow: auto;

			.goodTypeItem {
				width: 100%;
				display: flex;
				flex-direction: row;
				background: #FFF;
				border-bottom: 1px solid #C7C7C7;

				text {
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					border-right: 1px solid #C7C7C7;

					&:first-child {
						width: 120upx;
						text-align: center;
					}

					&:nth-child(2) {
						flex: 1;
					}

				}

				view {
					width: 200upx;
					text-align: center;
					display: flex;

					button {
						width: 40upx;
						height: 40upx;
						margin-top: 20upx;
						padding: 0upx;

						&:first-child {
							background: url(../../static/changeGood.png) no-repeat;
							background-size: 40upx;
						}

						&:last-child {
							background: url(../../static/deleteGoods.png) no-repeat;
							background-size: 40upx;
						}

					}
				}
			}
		}

	}

	.flOptions {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		position: fixed;
		bottom: 0upx;
		left: 0upx;

		button {
			flex: 1;
			height: 100upx;
			border-radius: 0upx;
			line-height: 100upx;
			background: rgb(124, 170, 216);
			color: #FFF;

			&:first-child {
				border-right: 1px solid #FFF;
			}
		}
	}

	.clientSearchItem {
		width: 100%;
		height: 50px;
		display: flex;
		box-sizing: border-box;
		padding: 7.5px 5px 0px 5px;
	}

	.clientSearchItem .clientSearch {
		flex: 1;
		height: 35px;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #ccc;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		padding-left: 8px;
		font-size: 14px;
	}

	.clientSearchItem .searchBt {
		width: 60px;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		background-color: rgba(124, 170, 216, 1);
		color: #FFF;
		background-color: #7CAAD8;
	}

	.Modal_Wrap {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2);

		.Model {
			position: absolute;
			background: #FFF;
			top: 50%;
			left: 10%;
			width: 80%;
			margin-top: -250upx;
			z-index: 99999;
			border: 1px solid #ebebeb;
			border-radius: 20upx;
			display: table;

			.modelTitle {
				width: 100%;
				line-height: 80upx;
				height: 80upx;
				text-align: center;
				font-size: 36upx;
				border-bottom: 1px solid #ebebeb;
			}

			.modelContains {
				box-sizing: border-box;
				font-size: 30upx;
				padding: 10upx 20upx;

				input {
					margin: 15upx 10upx;
					height: 38upx !important;
					line-height: 38upx !important;
					padding: 0upx;
					vertical-align: top;
				}

				text {
					height: 100%;
					line-height: 40upx;
					display: block;
				}
			}

			.modalOptions {
				width: 100%;
				height: 70upx;
				line-height: 70upx;
				display: flex;

				view {
					flex: 1;
					text-align: center;
					font-size: 30upx;
					border-top: 1px solid #ebebeb;

					&:first-child {
						border-right: 1px solid #ebebeb;
					}
				}
			}

		}
	}
</style>
